<template>
  <div id="app" :style="{ height: height + 'px' }">
    <h1 style="font-size: 30px; text-align: center; padding: 10px 30px 30px">
      UI 演示组件库
    </h1>

    <div class="p20">

    <MMenu :data="menuList" title="音乐榜单"  @onClick="onClick"/>

    <m-detail
        title="处理反馈"
        type="feedback"
        @onInput="feedback"
        :data="imgList"
        subTitle="内容描述"
      >
      <hr>
      <MImagePicker
        @onChange="onImageChange"
        :files="imgList"
        :maxLength="4"
      ></MImagePicker>
      </m-detail>

      <testDetail />
      

      <m-case-list :case-list="caseList" @onClick="onClick" />

      <m-task-info-list
        :status="state1"
        :data="list1"
        :numberName="numberName"
        :infoName="infoName"
        @onClick="onClick"
      />
      <m-task-info-list :data="list2" />
      <m-task-info-list :status="state3" :data="list3" /> 
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { MCaseList,
  MStar,
  MTaskInfoList,
  MDetail,
  MTimeline,
  MImagePicker,
  MMenu,} from 'maple-mini-ui'

import getScreenHeight from "./utils/getHeight";
import testDetail from "./test/test-detail.vue";
export default {
  name: "App",
  components: {
    testDetail,
    MCaseList,
  MStar,
  MTaskInfoList,
  MDetail,
  MTimeline,
  MImagePicker,
  MMenu,
  },
  data() {
    return {
      fmp_upload_api: "http://119.39.136.63:8085/FMP/FMP/Upload",
      height: 0,
      state1: 1,
      state2: 2,
      state3: 3,
      numberName: ["name1", "name2"],
      infoName: ["info1", "info2", "info3"],
      menuList: [
        {
          name: '黑胶VIP爱听榜',
          desc: '每周四更新',
          src:  'https://p2.music.126.net/G91csin09maPrNgqcUKnBQ==/109951165698553069.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐说唱榜',
          desc: '每周五更新',
          src:  'https://p2.music.126.net/G91csin09maPrNgqcUKnBQ==/109951165698553069.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐古典榜',
          desc: '刚刚更新',
          src:  'https://p2.music.126.net/7XQ7j5GKsiWQ6hLMtjGGKQ==/109951165611553527.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐电音榜',
          src:  'https://p2.music.126.net/oxltgfAKwRIPhin-5Kxzhw==/109951167192415163.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐ACG榜',
          src:  'https://p2.music.126.net/pAFaa_EVMj0ktkDo381dnw==/109951165611551680.jpg?param=40y40',
          isShow: true
        },
        {
          name: '黑胶VIP爱听榜黑胶VIP爱听榜',
          desc: '每周四更新',
          src:  'https://p2.music.126.net/G91csin09maPrNgqcUKnBQ==/109951165698553069.jpg?param=40y40',
          isShow: false
        },
        {
          name: '云音乐说唱榜',
          desc: '每周五更新',
          src:  'https://p2.music.126.net/G91csin09maPrNgqcUKnBQ==/109951165698553069.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐古典榜',
          desc: '刚刚更新',
          src:  'https://p2.music.126.net/7XQ7j5GKsiWQ6hLMtjGGKQ==/109951165611553527.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐电音榜',
          src:  'https://p2.music.126.net/oxltgfAKwRIPhin-5Kxzhw==/109951167192415163.jpg?param=40y40',
          isShow: true
        },
        {
          name: '云音乐ACG榜',
          src:  'https://p2.music.126.net/pAFaa_EVMj0ktkDo381dnw==/109951165611551680.jpg?param=40y40',
          isShow: true
        },
        {
          name: '动物诊疗',
          src:  require('./assets/menus/DWZLS.png'),
          isShow: false
        },
        {
          name: '文字描述',
          src:  require('./assets/menus/describe.png'),
          isShow: true
        },
        {
          name: '排行榜',
          src:  require('./assets/menus/menu3.png'),
          isShow: true
        },
        {
          name: 'AAA',
          src:  require('./assets/menus/menu1.png'),
          isShow: true
        },
        {
          name: 'AAA',
          src:  require('./assets/menus/menu2.png'),
          isShow: true
        },
        {
          name: 'AAA',
          src:  require('./assets/menus/menu3.png'),
          isShow: true
        },
        {
          name: 'AAA',
          src:  require('./assets/menus/menu4.png'),
          isShow: true
        },
      ],
      imgList: [
        // {
        //   id: 1,
        //   src: "https://img2.baidu.com/it/u=3382019668,1605723655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        // },
        // {
        //    id: 2,
        //   src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651201477&t=1721bbe37aa1a937cf883069916ddc1e",
        // },
        // {
        //    id: 3,
        //   src: "https://img0.baidu.com/it/u=2495658973,2184971954&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        // },
      ],
      list1: [
        {
          title: "自定义属性值",
          inspectionObjectTotal: 10,
          inspectedCompletedTotal: 10,
          inspectCompletedTotal: 10,
          code: "Task202203230002",
          taskTypeName: "户外广告日常巡查",
          cycleStartTime: "2022-03-23 00:00:00",
          cycleEndTime: "2022-03-23 23:59:59",
          executionRateName: "一周一次",
          cyclecompletenum: 3,
          cycleNumber: 20,
        },
      ],
      list2: [
        {
          title: "默认任务",
          inspectionObjectTotal: 1,
          inspectedCompletedTotal: 2,
          inspectCompletedTotal: 3,
        },
      ],
      list3: [
        {
          title: "任务3",
          inspectionObjectTotal: 10,
          inspectedCompletedTotal: 10,
          inspectCompletedTotal: 10,
          code: "Task202203230002",
          taskTypeName: "户外广告日常巡查",
          cycleStartTime: "2022-03-23 00:00:00",
          cycleEndTime: "2022-03-23 23:59:59",
          executionRateName: "一周一次",
          cyclecompletenum: 3,
          cycleNumber: 20,
        },
      ],
      taskInfoList: [
        {
          title: "西樵镇3月22日临时任务",
          taskState: 1,
          inspectionObjectTotal: 1,
          inspectedCompletedTotal: 2,
          inspectCompletedTotal: 3,
          code: "Task202203230002",
          taskTypeName: "户外广告日常巡查",
          cycleStartTime: "2022-03-23 00:00:00",
          cycleEndTime: "2022-03-23 23:59:59",
          cyclecompletenum: 3,
          cycleNumber: 20,
        },
        {
          title: "西樵镇3月22日临时任务",
          inspectionObjectTotal: 10,
          inspectedCompletedTotal: 10,
          inspectCompletedTotal: 10,
          code: "Task202203230002",
          taskTypeName: "户外广告日常巡查",
          cycleStartTime: "2022-03-23 00:00:00",
          cycleEndTime: "2022-03-23 23:59:59",
          executionRateName: "一周一次",
          cyclecompletenum: 3,
          cycleNumber: 20,
        },
        {
          title: "西樵镇3月22日临时任务",
          taskState: 1,
          inspectionObjectTotal: 10,
          inspectedCompletedTotal: 10,
          inspectCompletedTotal: 10,
          code: "Task202203230002",
          taskTypeName: "户外广告日常巡查",
          cycleStartTime: "2022-03-23 00:00:00",
          cycleEndTime: "2022-03-23 23:59:59",
          executionRateName: "一周一次",
          cyclecompletenum: 3,
          cycleNumber: 20,
        },
        {
          title: "西樵镇3月22日临时任务",
          taskState: 1,
          inspectionObjectTotal: 10,
          inspectedCompletedTotal: 10,
          inspectCompletedTotal: 10,
          code: "Task202203230002",
          taskTypeName: "户外广告日常巡查",
          cycleStartTime: "2022-03-23 00:00:00",
          cycleEndTime: "2022-03-23 23:59:59",
          executionRateName: "一周一次",
          cyclecompletenum: 3,
          cycleNumber: 20,
        },
      ],
      caseList: [
        {
          Image: "https://s3.bmp.ovh/imgs/2021/10/10106173b0d84f59.png",
          Code: "P202106220009",
          Address: "广东省深圳市宝安区灵芝街46号",
          ReportTime: "2021-06-22 00:24:36",
        },
        {
          Image: "https://s3.bmp.ovh/imgs/2021/10/10106173b0d84f59.png",
          Code: "P202106220009",
          Address: "广东省深圳市宝安区灵芝街46号",
          ReportTime: "2021-06-22 00:24:36",
        },
        {
          Image: "https://s3.bmp.ovh/imgs/2021/10/10106173b0d84f59.png",
          Code: "P202106220009",
          Address: "广东省深圳市宝安区灵芝街46号",
          ReportTime: "2021-06-22 00:24:36",
          CurrentStateName: "已受理",
        },
        {
          Image: "https://s3.bmp.ovh/imgs/2021/10/10106173b0d84f59.png",
          Code: "P202106220009",
          Address: "广东省深圳市宝安区灵芝街46号",
          ReportTime: "2021-06-22 00:24:36",
          CurrentStateName: "已受理",
        },
      ],
      process: [
        {
          title: "已受理",
          content: [
            "经办:" + "受理员",
            "办理意见:" + "自动受理",
            "2022-03-27 16:17:39",
          ],
          // icon: 'clock',
          color: "green",
        },
        {
          title: "待受理",
          content: [
            "经办:" + "市民",
            "办理意见:" + "待受理",
            "2022-03-27 16:17:39",
          ],
          color: "red",
        },
        {
          title: "待受理",
          content: [
            "经办:" + "市民",
            "办理意见:" + "待受理",
            "2022-03-27 16:17:39",
          ],
        },
      ],
    };
  },
  methods: {
    goJump(i) {
      console.log(i);
    },
    onClick(i) {
      alert(i.title);
    },
    onImageChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) {
        return;
      }
      const file = files[0];
      let formData = new FormData();
      formData.append("fileUpload", file);
      axios({
        url: this.fmp_upload_api,
        method: "POST",
        data: formData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then((res) => {
        this.onH5Preview(file, (imgData) => {
          this.imgList.push({
            id: res.data[0].ID,
            src: imgData,
          });
        });
      });
      // }
    },
    onH5Preview(file, onPreview) {
      let reader = new FileReader();
      reader.onload = function (e) {
        if (onPreview != null) {
          onPreview(reader.result);
        }
      };
      reader.readAsDataURL(file);
    },
    feedback(value) {
      console.log(value);
    },
    onClick(item) {
     console.log(item);
    }
  },
  created() {
    this.height = getScreenHeight();
    // console.log(AA);
  },
};
</script>

<style>
#app {
  color: #2c3e50;
  background-color: #eee;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.p20 {
  padding: 20px;
}
</style>
